<!--
/**
* Author: gaohui
* Date: 2023-03-01 16:02
* Desc: ComputedComp 计算组件
*/
-->

<template>
  <title-line title="computed基础用法" />
  <div class="mt10">数值A: {{ numOne }}</div>
  <div class="mt10">数值B: {{ numTwo }}</div>
  <div class="mt10">合计(通过computed计算得出)：{{ totalNum }}</div>
  <div class="mt10">
    <el-button @click.stop="handleAdd">添加数值B</el-button>
  </div>
  <el-divider border-style="dashed" />
  <title-line title="替换vue2的filter写法" />
  <div class="mt10">动物类型枚举值：{{ animalType }}</div>
  <div class="mt10">对应枚举文本：{{ getAnimalTypeName(animalType) }}</div>
  <div class="mt10">
    <el-button @click.stop="handleChangeAnimalType">修改动物类型</el-button>
  </div>
</template>

<script name="ComputedComp" lang="ts" setup>
import { ref, computed } from "vue";

const numOne = 77;
const numTwo = ref(11);

// 计算合计数值
const totalNum = computed(() => {
  const sumValue = Number(numOne + numTwo.value);
  return sumValue;
});

const handleAdd = () => {
  numTwo.value += 3;
};

const animalTypeMap = new Map([
  [0, "猩猩"],
  [1, "大象"],
  [2, "老虎"],
]);
const animalType = ref(0);
const getAnimalTypeName = computed(() => {
  return (val) => {
    return animalTypeMap.get(val);
  };
});

const handleChangeAnimalType = () => {
  animalType.value += 1;
  if (animalType.value > 2) {
    animalType.value = 0;
  }
};
</script>
<style lang="scss" scoped></style>
